<script setup>
import {ref} from 'vue';


const tags = ref(['', 'success', 'info', 'warning', 'danger'])

// 快捷入口
const links = ref([
  {title: 'Vue3', href: 'https://v3.cn.vuejs.org/'},
  {title: 'Element-Plus', href: 'https://element-plus.gitee.io/zh-CN/guide/design.html'},
  {title: 'Axios', href: 'http://www.axios-js.com/'},
  {title: 'Golang', href: 'https://golang.google.cn/'},
  {title: 'Gorm', href: 'https://gorm.io/'},
  {title: 'Echarts', href: 'https://echarts.apache.org/zh/index.html'},
  {title:'PGSQL',href:'https://www.postgresql.org/'},
  {title:'VsCode',href:'https://code.visualstudio.com/'},
  {title:'Redis',href:'https://redis.io/'}
])
/**
 * 跳转页面
 */
const goToPage = (url) => {
  window.open(url, '__blank')
}
</script>
<template>
  <div class="app-container">
    <el-row>
      <el-col :span="15">
        <!-- 致谢 -->
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>致谢</span>
            </div>
          </template>
          <el-row :gutter="2">
            <el-col :span="8">
              <el-card shadow="hover">
                <div class="card-title">
                  <img src="../assets/ruoyi-pic.png"/>
                  <el-link type="primary" :underline="false" href="http://doc.ruoyi.vip/">RuoYi-Vue</el-link>
                </div>
                <div
                    class="content"
                >基于SpringBoot，Spring Security，JWT，Vue & Element 的前后端分离权限管理系统。
                </div>
                <div class="footer">
                  <el-link :underline="false" href="http://doc.ruoyi.vip/">官 网</el-link>
                </div>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card shadow="hover">
                <div class="card-title">
                  <img
                      class="logo"
                      src="../assets/element-plus-pic.png"
                      alt="Elemenet Plus Logo"
                      data-v-385ae080
                  />
                  <el-link type="primary" :underline="false" href="https://element-plus.gitee.io/zh-CN/guide/design.html">Element-Plus</el-link>
                </div>
                <div class="content">Elment 的升级版，原班人马重新为Vue3打造的企业级别UI框架。</div>
                <div class="footer">
                  <el-link
                      :underline="false"
                      href="https://element-plus.gitee.io/zh-CN/guide/design.html"
                  >官 网
                  </el-link>
                </div>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card shadow="hover">
                <div class="card-title">
                  <img
                      src="https://static.vue-js.com/6280b990-ff19-11ea-85f6-6fac77c0c9b3.png"
                  />
                  <el-link type="primary" :underline="false" href="https://v3.cn.vuejs.org/">Vue-3.2.20</el-link>
                </div>
                <div class="content">Vue2的升级,script setup 函数的最终实践。</div>
                <div class="footer">
                  <el-link :underline="false" href="https://v3.cn.vuejs.org/">官 网</el-link>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-card>
        <el-divider></el-divider>
        <!-- 项目简介 -->
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>MBTI系统简介</span>
            </div>
          </template>
          <div class="content">
            <span style="font-weight: bold;">MBTI职业性格测试系统</span> 是以Go-Zero作为后端。以Vue3.2.20、echarts、element-plus等来构建前端的。
            <p
                style="margin: 5px 0;"
            >系统简单还原了MBTI测试的功能，总共实现了以下功能：做题，学号查询，班级号查询等功能。有意外情况企鹅联系！</p>
            <address>
              
              <span style="color: lightcoral;">门牌号：1036412363</span>
            </address>
          </div>
        </el-card>
      </el-col>
      <el-col :span="1"></el-col>
      <el-col :span="8" class="card-box" style="padding-right: 0px;">
         <!-- gitup项目展示 -->
        <a class="img-pro--container" href="https://gitee.com/shadowwink/mbtisystem">
          <img
              src="../assets/preview7.png"
          />
        </a>
        <el-divider></el-divider>
         <!-- 涉及技术便捷入口 -->
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>涉及技术便捷入口 (点击图片或便签跳转)</span>
            </div>
          </template>
          <div class="content" style="height: auto;">
            <template v-for="(item,index) in links" :key="item.title">
              <el-tag
                  @click="goToPage(item.href)"
                  class="tags-style"
                  :type="tags[index % tags.length]"
              >{{ item.title }}
              </el-tag>
            </template>
          </div>
        </el-card>
        <el-divider></el-divider>
        <!-- 贡献者 -->
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>贡献者</span>
            </div>
          </template>
          <div class="content _flex">
            <div class="card-title person">
              <!-- <img src="https://avatars.githubusercontent.com/u/41314419?s=48&v=4"/> -->
              <el-link
                  type="primary"
                  :underline="false"
                  href="https://gitee.com/wu_wen_yi"
              >W神
              </el-link>
            </div>
            <div class="card-title person">
              <!-- <img src="https://avatars.githubusercontent.com/u/44079368?v=4"/> -->
              <el-link
                  type="primary"
                  :underline="false"
                  href="https://gitee.com/Defalt"
              >Defalt
              </el-link>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style lang='less' scoped>
.box-card {
  :deep(.el-card__header) {
    padding: 14px 15px 7px;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .card-title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;

    img {
      height: 24px;
      vertical-align: middle;
    }
  }

  .person {
    justify-content: start;
    cursor: pointer;

    img {
      height: 40px;
      vertical-align: middle;
      border-radius: 50%;
      margin-right: 10px;
    }
  }

  .content {
    color: rgba(0, 0, 0, 0.45);
    height: 66px;
    line-height: 20px;
    font-size: 14px;
    margin-bottom: 20px;

    .tags-style {
      margin: 5px;
      cursor: pointer;
    }
  }
  ._flex{
    height: auto;
    display: flex;
    justify-content: space-around;
  }
  .footer {
    display: flex;
    justify-content: space-between;
  }
}

.img-pro--container {
  cursor: pointer;

  img {
    width: 100%;
  }
}
</style>